<template>
  <div class="app">
    <router-view />
    <van-tabbar v-model="active" route>
      <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
      <van-tabbar-item icon="comment-o" to="/practice">练习</van-tabbar-item>
      <van-tabbar-item icon="user-o" to="/profile">个人中心</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup>
// App root component
import { ref, onMounted } from 'vue'

const active = ref(0)

// 检测系统主题偏好并应用相应主题
onMounted(() => {
  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
  document.documentElement.classList.add(prefersDark ? 'dark-theme' : 'light-theme')
  
  // 监听系统主题变化
  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
    if (e.matches) {
      document.documentElement.classList.remove('light-theme')
      document.documentElement.classList.add('dark-theme')
    } else {
      document.documentElement.classList.remove('dark-theme')
      document.documentElement.classList.add('light-theme')
    }
  })
})
</script>

<style>
.app {
  max-height: 90vh;
  width: 100%;
  height: 90vh;
  background-color: var(--primary-bg);
  color: var(--text-primary);
  padding-bottom: 56px; /* 增加底部间距，适应新的tabbar高度 */
  margin: 0 auto;
  position: relative;
  overflow-y: auto;
  max-width: 768px; /* 限制最大宽度，提升在大屏幕上的体验 */
  border-left: 1px solid var(--border-color);
  border-right: 1px solid var(--border-color);
  box-shadow: var(--shadow-lg);
}
/* 宽度大于 768 的时候应用样式 */
@media (min-width: 768px) {
  .app {
    margin: 0 auto;
    padding: 0;
    /* border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg); */
  }
}

.van-tabbar {
  position: fixed;
  bottom: 0;
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  left: 0;
  right: 0;
  background-color: var(--nav-bg); /* 使用导航栏背景变量 */
  color: var(--text-primary);
  border-top: 1px solid var(--border-color);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(10px); /* 毛玻璃效果 */
  -webkit-backdrop-filter: blur(10px);
  height: 56px; /* 固定高度 */
  padding-bottom: env(safe-area-inset-bottom); /* 适配iPhone底部安全区域 */
}

/* 自定义Tabbar图标和文字样式 */
.van-tabbar-item {
  color: var(--text-secondary);
}

.van-tabbar-item--active {
  color: var(--accent-color);
}

@media (min-width: 768px) {
  .van-tabbar {
    max-width: 768px;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
  }
}
</style>
